import React, { useState, useEffect } from "react";
import { Row, Col, Input, Select, Button, message } from "antd";
import Others from "../../api/other/index";
import "./index.less";
const { Option } = Select;

const AddGithub = props => {
  useEffect(() => {
    let tempId = props.match.params.id;
    if (tempId) {
      console.log(tempId);
      getDetail(tempId);
      setDetailId(tempId);
    }
  }, [props.match.params.id]);
  const [detailId, setDetailId] = useState();
  const [name, setName] = useState();
  const [countName, setCountName] = useState("UvDream");
  const [url, setUrl] = useState("https://github.com/UvDream/");
  const [star, setStar] = useState();
  const [desc, setDesc] = useState();
  const [language, setLanguage] = useState();
  const [status, setStatus] = useState();
  const getDetail = id => {
    Others.detail({ id: id }).then(res => {
      if (res.code === 200) {
        setName(res.data.name);
        setCountName(res.data.author);
        setUrl(res.data.url);
        setStar(res.data.star);
        setDesc(res.data.desc);
        setLanguage(res.data.language);
        setStatus(res.data.status);
      }
    });
  };
  //   输入框变化
  const inputChange = (e, id) => {
    id === 1 ? setName(e.target.value) : nullFunc();
    id === 2 ? setCountName(e.target.value) : nullFunc();
    id === 4 ? setUrl(e.target.value) : nullFunc();
    id === 5 ? setStar(e.target.value) : nullFunc();
    id === 6 ? setDesc(e.target.value) : nullFunc();
    id === 7 ? setLanguage(e) : nullFunc();
    id === 8 ? setStatus(e) : nullFunc();
  };
  const saveGithub = () => {
    let formData = {
      id: detailId,
      name: name,
      count_name: countName,
      url: url,
      star: star,
      desc: desc,
      language: language,
      status: status
    };
    Others.add(formData).then(res => {
      if (res.code === 200) {
        detailId ? message.success("修改成功!") : message.success("保存成功");
        props.history.push("/index/github");
      } else {
        message.error(res.data);
      }
    });
  };

  const nullFunc = () => {};
  return (
    <div className="add white-bg">
      {/* 项目名 */}
      <Row type="flex" align="middle">
        <Col xs={5} sm={4} md={3} lg={3} xl={2} className="add-name">
          项目名称:
        </Col>
        <Col xs={19} sm={20} md={20} lg={15} xl={10}>
          <Input
            placeholder="输入项目名称"
            value={name}
            onChange={e => {
              inputChange(e, 1);
            }}
          />
        </Col>
      </Row>
      <br />
      {/* 账户名 */}
      <Row type="flex" align="middle">
        <Col xs={5} sm={4} md={3} lg={3} xl={2} className="add-name">
          账户名:
        </Col>
        <Col xs={19} sm={20} md={20} lg={15} xl={10}>
          <Input
            placeholder="输入项目账户名"
            value={countName}
            onChange={e => {
              inputChange(e, 2);
            }}
          />
        </Col>
      </Row>
      <br />

      {/* URL */}
      <Row type="flex" align="middle">
        <Col xs={5} sm={4} md={3} lg={3} xl={2} className="add-name">
          URL:
        </Col>
        <Col xs={19} sm={20} md={20} lg={15} xl={10}>
          <Input
            placeholder="输入项目url"
            value={url}
            onChange={e => {
              inputChange(e, 4);
            }}
          />
        </Col>
      </Row>
      <br />
      {/* star */}
      <Row type="flex" align="middle">
        <Col xs={5} sm={4} md={3} lg={3} xl={2} className="add-name">
          Star:
        </Col>
        <Col xs={19} sm={20} md={20} lg={15} xl={10}>
          <Input
            placeholder="输入项目star数"
            value={star}
            onChange={e => {
              inputChange(e, 5);
            }}
          />
        </Col>
      </Row>
      <br />
      {/* 描述 */}
      <Row type="flex" align="middle">
        <Col xs={5} sm={4} md={3} lg={3} xl={2} className="add-name">
          描述:
        </Col>
        <Col xs={19} sm={20} md={20} lg={15} xl={10}>
          <Input
            placeholder="输入项目描述"
            value={desc}
            onChange={e => {
              inputChange(e, 6);
            }}
          />
        </Col>
      </Row>
      <br />
      {/* 语言 */}
      <Row type="flex" align="middle">
        <Col xs={5} sm={4} md={3} lg={3} xl={2} className="add-name">
          语言:
        </Col>
        <Col xs={19} sm={20} md={20} lg={15} xl={10}>
          <Select
            placeholder="请选择语言"
            style={{ width: "100%" }}
            value={language}
            onChange={value => {
              inputChange(value, 7);
            }}
          >
            <Option value="0">javascript</Option>
            <Option value="1">html</Option>
            <Option value="2">css3</Option>
            <Option value="3">typescript</Option>
            <Option value="4">dart</Option>
            <Option value="5">go</Option>
          </Select>
        </Col>
      </Row>
      <br />
      {/* 状态 */}
      <Row type="flex" align="middle">
        <Col xs={5} sm={4} md={3} lg={3} xl={2} className="add-name">
          状态:
        </Col>
        <Col xs={19} sm={20} md={20} lg={15} xl={10}>
          <Select
            placeholder="请选择项目状态"
            style={{ width: "100%" }}
            value={status}
            onChange={value => {
              inputChange(value, 8);
            }}
          >
            <Option value="0">维护</Option>
            <Option value="1">进行中</Option>
            <Option value="2">完结</Option>
            <Option value="3">暂停</Option>
          </Select>
        </Col>
      </Row>
      <br />
      <Row type="flex" align="middle">
        <Col
          xs={24}
          sm={24}
          md={23}
          lg={18}
          xl={12}
          style={{ textAlign: "center" }}
        >
          <Button type="primary" shape="round" onClick={saveGithub}>
            提交
          </Button>
        </Col>
      </Row>
    </div>
  );
};
export default AddGithub;
